<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>购物车编辑页面</title>
	<link rel="stylesheet" href="./css/base.css">
	<link rel="stylesheet" href="./css/shopbar.css">

</head>

<body>
	<div class="w">
		<div class="all">
			<h3 class="color-red">全部商品</h3>
			<div class="all-select">
				<ul>
					<!-- <li><input type="checkbox" name="ckbox" onclick="check()">全选</li> -->
					<li><input type="checkbox" name="ckbox">全选</li>
					<li>商品</li>
					<li>单价(元)</li>
					<li>数量</li>
					<li>小计(元)</li>
					<li>操作</li>
				</ul>
			</div>
		</div>
		<!-- 传智自营 -->
		<div class="box">
			<div class="box-bd">
				<div class="small">
					<ul>
						<li>
							<input type="checkbox" name="ckbtn">
							<img src="../upload/01.jpg" alt="">
						</li>
						<li class="shop-name">
							<p>苹果硅胶运动表带<br>可适用于iwatch6苹果手表表带 <br></p>
							<br><span class="gr">购买礼品包装</span>
						</li>
						<li>
							颜色：黑色...
						</li>
						<li class="price">165</li>
						<li>
							<div class="youhuo">
								<div class="plus">-</div>
								<input type="text" class="txt" value="1">
								<div class="mins">+</div>
							</div>
							<div class="youhuo">有货</div>
						</li>
						<li class="totle">165.00</li>
						<li>
							<a href="#">删除</a> <br>
							<a href="#">移到我的关注</a>
						</li>
					</ul>
				</div>
				<!--   				
				<div class="small">
					<ul>
		  				<li>
							<input type="checkbox" name="ckbtn">
							<img src="../upload/02.png" alt="">
						</li>
						<li class="shop-name">
							<p>DanielWellington丹尼尔惠灵顿DW手表女<br>28mm女士简约气质时尚女表 <br></p>
							<i></i><span class="gr">购买礼品包装</span>
						</li>
						<li>
							颜色：金色...
						</li>
						<li class="price">1182.00</li>
						<li>
							<div class="youhuo">
								<div class="plus">-</div>
								<input type="text" class="txt" value="0">
								<div class="mins">+</div>
							</div>
							<div class="youhuo">有货</div>
						</li>
						<li class="totle">1182.00</li>
						<li>
							<a href="#">删除</a> <br>
							<a href="#">移到我的关注</a>
						</li>
					</ul>
				</div>
				<div class="small">
					<ul>
						<li>
							<input type="checkbox" name="ckbtn">
							<img src="../upload/05.jpg" alt="">
						</li>
						<li class="shop-name">
							<p>ASICS亚瑟士缓震保护跑步鞋轻便运动鞋<br>GEL-FLUX 4男子秋款跑鞋<br></p>
							<i></i><span>购买礼品包装</span>
						</li>
						<li>
							颜色:白色..
						</li>
						<li class="price">181.00</li>
						<li>
							<div class="youhuo">
								<div class="plus">-</div>
								<input type="text" class="txt" value="0">
								<div class="mins">+</div>
							</div>
							<div class="youhuo">有货</div>
						</li>
						<li class="totle">181.00</li>
						<li>
							<a href="#">删除</a> <br>
							<a href="#">移到我的关注</a>
						</li>
					</ul>
				</div> -->
			</div>
		</div>
		<!-- 删除 -->
		<div class="delete">
			<div class="all-delete clearfix">
				<ul class="fl">
					<!-- <li></li> -->
					<li><input type="checkbox" name="ckbox">全选</li>
					<!-- <li><input type="checkbox" name="ckbox"> 全不选</li> -->
					<li><a href="">删除选中的商品</a></li>
					<li><a href="">移到我的关注</a></li>
					<li><a href="">清除下柜商品</a></li>
				</ul>
				<div class="js fr">
					<a href="../pay-商品支付页面/pay.html">结算</a>
				</div>
				<div class="last-pr fr">
					<p>已选商品：<span class="number">0</span>件</p>
					<p>合计：<span class="totleprice">0</span>元</p>
					<!-- <p> 已节省：￥0.00</p> -->
				</div>

			</div>
			<p>已删除商品，您可以重新购买或加关注：</p>

		</div>
	</div>

	<script src="./js/cartcommodity.js"></script>
	<script>
		var ckbox = document.getElementsByClassName("ckbox");
		var ckbtn = document.getElementsByClassName("ckbtn");
		var plus = document.getElementsByClassName("plus");
		var mins = document.getElementsByClassName("mins");
		var txt = document.getElementsByClassName("txt");
		var price = document.getElementsByClassName("price");
		var totle = document.getElementsByClassName("totle");
		var allprice = document.getElementsByClassName("totleprice")[0];
		var number = document.getElementsByClassName("number")[0];
		var count = 0;
		//商品信息前复选框的事件
		for (var i = 0; i < ckbtn.length; i++) {
			ckbtn[i].onclick = function () {
				if (this.checked) {
					count++;
				}
				else {
					count--;
				}
				if (count == ckbtn.length) {
					ckbox[0].checked = true;
					ckbox[1].checked = true;
				}
				else {
					ckbox[0].checked = false;
					ckbox[1].checked = false;
				}
				ischoose();
			}
		}
		//全选复选框的事件
		for (key in ckbox) {
			ckbox[key].index = key;  //给index属性上绑值，绑个索引
			ckbox[key].onclick = function () {
				ckbox[this.index == 0 ? 1 : 0].checked = !ckbox[this.index == 0 ? 1 : 0].checked;
				if (this.checked) {
					for (var i = 0; i < ckbtn.length; i++) {
						ckbtn[i].checked = true;
					}
				}
				else {
					for (var i = 0; i < ckbtn.length; i++) {
						ckbtn[i].checked = false;
					}
				}
				ischoose();
			}
		}
		//购物车数量的增减事件
		for (var i = 0; i < plus.length; i++) {
			plus[i].index = i;
			plus[i].onclick = function () {
				var val = txt[this.index].value;
				val--;
				if (val < 1) {
					val = 1;
				}
				txt[this.index].value = val;
				addprice(this.index, val);
				ischoose();
			}
			mins[i].index = i;
			mins[i].onclick = function () {
				var val = txt[this.index].value;
				val++;
				txt[this.index].value = val;
				addprice(this.index, val);
				ischoose();
			}
		}
		//金额的计算方法
		function addprice(index, value) {
			totle[index].innerHTML = "￥" + (price[index].getAttribute("data-price") * value).toFixed(2);
			totle[index].setAttribute("data-totle", (price[index].getAttribute("data-price") * value).toFixed(2));
		}
		//判断商品信息前的复选框是否打勾
		function ischoose() {
			var totleprice = 0;
			var num = 0;
			for (var i = 0; i < ckbtn.length; i++) {
				if (ckbtn[i].checked) {
					totleprice += parseFloat(totle[i].getAttribute("data-totle"));
					num += parseInt(txt[i].value);
				}
			}
			allprice.innerHTML = "￥" + totleprice.toFixed(2);
			number.innerHTML = num;
		}


		/*
		问题：点第一个“全选”按钮时，第二个“全选”按钮自动打钩，反之亦然
		解决思路：存值，即给index属性上绑值，绑个索引
		解决方法：判断当前index属性的索引，找到其相反的索引值（只有两个“全选”按钮，因此若当前索引为0，找到索引为1的那个；反之亦然），使其复选框前打钩
		代码如下：
		for (key in ckbox) {
			ckbox[key].index = key;  //给index属性上绑值，绑个索引
			ckbox[key].onclick = function () {
				ckbox[this.index == 0 ? 1 : 0].checked = true;
				for (var i = 0; i < ckbtn.length; i++) {
					ckbtn[i].checked = true;
				}
			}
		}*/
	</script>


</body>

</html>